<link href="../../dist/lib/imgcutter/zui.imgcutter.css" rel="stylesheet">
<style>
.img-cutter-info {margin-bottom: 10px}
</style>

<article>
  <p>通过本插件允许用户通过拖拽区域边框来选定裁剪区域。</p>
  <div class="alert alert-primary-inverse">
    <h4>提示</h4>
    <p>为兼容更多的浏览器，此插件实际并不会对图片进行剪裁操作。当确定裁剪区域后，你需要将剪裁区域数据上传到服务器，让服务器进行图片裁剪操作。</p>
    <p>你仍然可以通过监听<code>before</code>事件来自行处理确定裁剪区域后的操作，包括在本地对图片进行剪裁。</p>
  </div>
</article>

<section>
  <header><h3>综合示例</h3></header>
  <article>
    <div class="example">
      <div class='img-cutter' id="imgCutter">
        <div class="canvas"><img src="docs/img/slide1.jpg" alt=""></div>
        <div class="actions">
          <h5>拖拽来剪切图片</h5>
          <div class='img-cutter-info small'></div>
          <button type="button" class='btn btn-primary img-cutter-submit'>确认</button>
        </div>
      </div>
    </div>
    <pre><code>&lt;!-- HTML结构 --&gt;
&lt;div class=&quot;img-cutter&quot; id=&quot;imgCutter&quot;&gt;
  &lt;div class=&quot;canvas&quot;&gt;&lt;img src=&quot;image.jpg&quot; alt=&quot;&quot;&gt;&lt;/div&gt;
  &lt;div class=&quot;actions&quot;&gt;
    &lt;h5&gt;拖拽来剪切图片&lt;/h5&gt;
    &lt;button type=&quot;button&quot; class=&quot;btn btn-primary img-cutter-submit&quot;&gt;确认&lt;/button&gt;
  &lt;/div&gt;
&lt;/div&gt;</code></pre>
    <pre><code>// 通过Javascript初始化
$(&quot;#imgCutter&quot;).imgCutter(options);</code></pre>
  </article>
</section>

<section>
  <header><h3>用法</h3></header>
  <article>
    <h4>启动参数</h4>
    <table class="table table-bordered">
      <thead>
        <tr>
          <th>参数</th>
          <th>名称</th>
          <th>可选值</th>
          <th>说明</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td><code>coverColor</code></td>
          <td>遮罩层颜色</td>
          <td>表示颜色的字符串，默认为<code>"#000"</code></td>
          <td></td>
        </tr>
        <tr>
          <td><code>coverOpacity</code></td>
          <td>遮罩层透明度</td>
          <td>小于1的数字，默认为<code>0.6</code></td>
          <td></td> 
        </tr>
        <tr>
          <td><code>defaultWidth</code></td>
          <td>默认图片宽度</td>
          <td>默认为<code>128</code></td>
        </tr>
        <tr>
          <td><code>defaultHeight</code></td>
          <td>默认图片高度</td>
          <td>默认为<code>128</code></td>
        </tr>
        <tr>
          <td><code>fixedRatio</code></td>
          <td>启用固定尺寸比例</td>
          <td><code>false</code>（默认）|<code>true</code></td>
          <td>如果启用固定尺寸比例，则用户在拖拽更改尺寸时会已初始比例进行同步缩放</td>
        </tr>
        <tr>
          <td><code>minWidth</code></td>
          <td>最小宽度</td>
          <td>默认为<code>48</code></td>
        </tr>
        <tr>
          <td><code>minHeight</code></td>
          <td>最小高度</td>
          <td>默认为<code>48</code></td>
        </tr>
        <tr>
          <td><code>post</code></td>
          <td>提交地址</td>
          <td>默认为<code>null</code></td>
          <td>当用户确认裁剪尺寸区域后会将尺寸区域数据通过POST请求提交到此地址</td>
        </tr>
        <tr>
          <td><code>get</code></td>
          <td>提交地址</td>
          <td>默认为<code>null</code></td>
          <td>当用户确认裁剪尺寸区域后会将尺寸区域数据通过GET请求提交到此地址</td>
        </tr>
      </tbody>
    </table>
    <pre><code>// 使用启动参数
$(&quot;#imgCutter&quot;).imgCutter({
    fixedRatio: true
});</code></pre>

    <h4>事件</h4>
    <table class="table table-bordered">
      <thead>
        <tr>
          <th>事件</th>
          <th>jquery事件名称</th>
          <th>说明</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td><code>ready</code></td>
          <td>ready.zui.imgcutter</td>
          <td>当初始化之后时触发此事件</td>
        </tr>
        <tr>
          <td><code>change</code></td>
          <td>change.zui.imgcutter</td>
          <td>当用户更改所选择的区域时触发</td>
        </tr>
        <tr>
          <td><code>before</code></td>
          <td>before.zui.imgcutter</td>
          <td>当用户确认提交所选择的区域时触发，在该事件回调函数中返回<code>false</code>可以取消此次提交</td>
        </tr>
        <tr>
          <td><code>done</code></td>
          <td>done.zui.imgcutter</td>
          <td>当提交数据到服务器成功后触发</td>
        </tr>
        <tr>
          <td><code>fail</code></td>
          <td>fail.zui.imgcutter</td>
          <td>当提交数据到服务器失败后触发</td>
        </tr>
        <tr>
          <td><code>always</code></td>
          <td>always.zui.imgcutter</td>
          <td>当提交数据到服务器完成后触发</td>
        </tr>
      </tbody>
  </article>
</section>

<script src="../../dist/lib/imgcutter/zui.imgcutter.js"></script>
<script>
function afterPageLoad() {
    var $imgCutterInfo = $('.img-cutter-info');
    $("#imgCutter").imgCutter({
        fixedRatio: true, 
        before: function(e) {
            console.log(e);
            window.bootbox.alert('<h3>准备提交的数据</h3><table class="table table-bordered table-condensed"><thead><th>属性</th><th>实际值</th><th>说明</th></thead><tbody><tr><th>originWidth</th><td>{originWidth}</td><td>原始图片宽度</td></tr><tr><th>originHeight</th><td>{originHeight}</td><td>原始图片高度</td></tr><tr><th>scaled</th><td>{scaled}</td><td>裁剪之前是否对原始图片进行了缩放</td></tr><tr><th>scaleHeight</th><td>{scaleHeight}</td><td>原始图片缩放后的高度</td></tr><tr><th>scaleWidth</th><td>{scaleWidth}</td><td>原始图片缩放后的宽度</td></tr><tr><th>width</th><td>{width}</td><td>裁剪后的宽度</td></tr><tr><th>height</th><td>{height}</td><td>裁剪后的高度</td></tr><tr><th>left</th><td>{left}</td><td>裁剪位置距离左侧的距离</td></tr><tr><th>right</th><td>{right}</td><td>裁剪位置距离右侧的距离</td></tr><tr><th>top</th><td>{top}</td><td>裁剪位置距离上边的距离</td></tr><tr><th>bottom</th><td>{bottom}</td><td>裁剪位置距离下边的距离</td></tr></tbody></table>'.format(e));
        },
        change: function(e) {
            $imgCutterInfo.text("宽度：{width}px，高度：{height}px，上边：{top}px，下边：{bottom}px，左边：{left}px，右边：{right}px".format(e));
        }
    });
}
</script>
